<template>
    <div class="app-container page-wood-purchase-record">
        <FilterForm :data="filterData" @search="getList" labelWidth="86px" />

        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['woodPurchase:purchaseOrder:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['woodPurchase:purchaseOrder:remove']"
                    >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleCheckOrder(0)"
                    v-hasPermi="['woodPurchase:purchaseOrder:edit']"
                    >审核</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleCheckOrder(1)"
                    v-hasPermi="['woodPurchase:purchaseOrder:edit']"
                    >反审核</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-switch-button"
                    size="mini"
                    :disabled="multiple"
                    @click="handleCloseOpen(0)"
                    v-hasPermi="['woodPurchase:purchaseOrder:edit']"
                    >关闭</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-switch-button"
                    size="mini"
                    :disabled="multiple"
                    @click="handleCloseOpen(1)"
                    v-hasPermi="['woodPurchase:purchaseOrder:edit']"
                    >开启</el-button
                >
            </el-col>
        </el-row>

        <Table
            :api="$Api.woodPurchase.order.list"
            :selection="true"
            @select="handleSelectionChange"
            @dbClick="rowDblclick"
            ref="Table"
            height="60vh"
        >
            <el-table-column
                label="操作"
                align="center"
                width="130"
                fixed="left"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['woodPurchase:purchaseOrder:edit']"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="['woodPurchase:purchaseOrder:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="单据日期"
                align="center"
                prop="invoicesTime"
                width="120"
            >
                <template slot-scope="scope">
                    <span>{{
                        parseTime(scope.row.invoicesTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="装运日期"
                align="center"
                prop="shippingTime"
                width="120"
            >
                <template slot-scope="scope">
                    <span>{{
                        parseTime(scope.row.shippingTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="供应商"
                align="center"
                prop="supplierName"
            />
            <el-table-column label="开证公司" align="center" prop="pactName" />
            <el-table-column
                label="订单数量"
                align="center"
                prop="orderCount"
            />
            <el-table-column label="入库数量" align="center" prop="inCount" />
            <el-table-column label="在途数量" align="center" prop="wayCount" />
            <el-table-column
                label="未入库数量"
                align="center"
                prop="notInCount"
                width="155"
            />
            <el-table-column label="金额" align="center" prop="money" />
            <el-table-column
                label="订单状态"
                align="center"
                key="orderStatus"
                fixed="right"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.orderStatus == 0">未入库</span>
                    <span v-else-if="scope.row.orderStatus == 1">部分入库</span>
                    <span v-else-if="scope.row.orderStatus == 2">全部入库</span>
                    <span v-else>关闭</span>
                </template>
            </el-table-column>
            <el-table-column label="港口" align="center" prop="harbor" />
            <el-table-column
                label="订单号"
                align="center"
                prop="orderId"
                width="160"
            />
            <el-table-column
                label="开证合同号"
                align="center"
                prop="pactNum"
                width="160"
                fixed="right"
            />
            <el-table-column
                label="关联提单号"
                align="center"
                prop="ladingNum"
                width="155"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span>{{
                        scope.row.ladingNum == null
                            ? null
                            : scope.row.ladingNum.replace(/\[|\]|\"/g, "")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="审核状态"
                align="center"
                key="auditStatus"
                fixed="right"
            >
                <template slot-scope="scope">
                    <span class="success" v-if="scope.row.auditStatus == 1"
                        >已审核</span
                    >
                    <span class="error" v-else>未审核</span>
                </template>
            </el-table-column>
            <el-table-column label="审核人" align="center" prop="auditor" />
            <el-table-column label="备注" align="center" prop="remark" />
        </Table>
    </div>
</template>

<script>
export default {
    name: "PurchaseOrder",
    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 采购订单信息表格数据
            purchaseOrderList: [],
            // 采购订单商品列表表格数据
            woodPurchaseOrderGoodsList: [],
            filterData: [
                {
                    label: "单据日期",
                    type: "period_date",
                    st: "subBeginRegisterTime",
                    end: "subEndRegisterTime",
                    scale: 2,
                },
                {
                    label: "供应商",
                    name: "supplierName",
                    type: "supplier",
                },
                {
                    label: "开证公司",
                    name: "pactName",
                    type: "supplier",
                },
                { label: "订单号", name: "orderId" },
                {
                    label: "港口",
                    name: "harbor",
                    type: "select",
                    select: "woodPort",
                },
                {
                    label: "审核状态",
                    name: "auditStatus",
                    type: "select",
                    select: {
                        option: [
                            {
                                value: "1",
                                label: "已审核",
                            },
                            {
                                value: "0",
                                label: "未审核",
                            },
                        ],
                        selectLabel: "label",
                        selectValue: "value",
                    },
                },
                {
                    label: "订单状态",
                    name: "orderStatus",
                    type: "select",
                    select: {
                        option: [
                            {
                                value: "0",
                                label: "未入库",
                            },
                            {
                                value: "1",
                                label: "部分入库",
                            },
                            {
                                value: "2",
                                label: "全部入库",
                            },
                            {
                                value: "3",
                                label: "已关闭",
                            },
                        ],
                        selectLabel: "label",
                        selectValue: "value",
                    },
                },
            ],

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                delFlag: [
                    {
                        required: true,
                        message: "删除标志;不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        // 未入库数量计算  订单数量 - 入库数量 - 在途数量
        notPutInStorageSum() {
            return (i) => {
                let { orderCount, inCount, wayCount } =
                    this.purchaseOrderList[i];
                let t = orderCount - inCount - wayCount;
                t = t.toFixed(3);
                this.purchaseOrderList[i].notInCount = t;
                return t;
            };
        },
    },
    created() {},
    methods: {
        /** 查询采购订单信息列表 */
        getList(params) {
            this.$refs.Table.getData(params);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.orderId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.$router.push({
                path: "/purchase/invoice/order",
            });
        },
        // 双击操作
        rowDblclick(row, column, event) {
            this.handleUpdate(row);
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.orderId;
            let path = `/purchase/purchaseOrder/list/${id}`;
            this.$router.push({
                path,
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const orderIds = row.orderId || this.ids;
            this.$confirm(
                '是否确认删除采购订单信息编号为"' + orderIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.$Api.woodPurchase.order.del(orderIds).then((res) => {
                        let { code } = res;
                        if (code == 200) {
                            this.getList();
                            this.msgSuccess("删除成功");
                        }
                    });
                })
                .catch(() => {});
        },
        // 审核订单 审核与反审核 审核状态;0未审核 1已审核
        handleCheckOrder(auditStatus) {
            let { ids } = this;
            this.$confirm(
                "是否确认" +
                    `${auditStatus == "0" ? "审核" : "反审核"}` +
                    '采购订单信息编号为"' +
                    ids +
                    '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.$Api.woodPurchase.order
                        .setState({
                            orderIds: ids,
                            auditStatus,
                            isStatus: 0,
                        })
                        .then((res) => {
                            let { code } = res;
                            if (code == 200) {
                                this.getList();
                                this.msgSuccess(
                                    `${
                                        auditStatus == "0" ? "审核" : "反审核"
                                    }` + "成功"
                                );
                            }
                        })
                        .catch(() => {
                            this.getList();
                        });
                })
                .catch(() => {});
        },
        // 关闭、开启订单操作 0未入库 1部分入库 2全部入库 3已关闭
        handleCloseOpen(orderStatus) {
            let { ids } = this;
            this.$confirm(
                "是否确认" +
                    `${orderStatus == "0" ? "关闭" : "开启"}` +
                    '采购订单编号为"' +
                    ids +
                    '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.$Api.woodPurchase.order
                        .setState({
                            orderIds: ids,
                            orderStatus,
                            isStatus: 1,
                        })
                        .then((res) => {
                            let { code } = res;
                            if (code == 200) {
                                this.getList();
                                this.msgSuccess(
                                    `${orderStatus == "0" ? "关闭" : "开启"}` +
                                        "成功"
                                );
                            }
                        })
                        .catch(() => {
                            this.getList();
                            this.$message({
                                message: "警告，只有审核后的单才可开启和关闭",
                                type: "warning",
                            });
                        });
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.page-wood-purchase-record {
    .success {
        color: #67c23a;
    }
    .error {
        color: #f56c6c;
    }
    .disabled {
        color: #a8a8a8;
    }

    .error {
        color: #fa3e3e;
    }
}
.opr-btn-group {
    margin-top: 0;
}
.check-btn-group {
    position: relative;
    z-index: 10;
    display: inline-block;
    margin: 0 5px;
    width: 70px;
    height: 28px;

    &:hover {
        button:last-child {
            display: block;
        }
    }

    button {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        width: 70px;
        &:last-child {
            top: 28px;
            display: none;
        }
    }
}
</style>